<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>计算</title>
    <link rel="stylesheet" href="https://coldfront.gitee.io/foods/cai.css">
    
</head>
<body>

    <div id="cai_obj">
            <span><input type="text" placeholder="菜名" id="name"></span>
            <span><input type="text" placeholder="单价:元/斤" id="price"></span>
            <span><input type="text" placeholder="市场价:元/斤" id="priced"></span>
            <span><input type="text" placeholder="重量:公斤" id="meight"></span>
            <span >
            <svg onclick="add()" t="1685945709520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2389" width="2.5em" height="2.5em"><path d="M512 1023.9488C229.4272 1023.9488 0.3584 794.8288 0.3584 512.256 0.3584 229.632 229.4272 0.5376 512 0.5376s511.6416 229.12 511.6416 511.6928C1023.6416 794.88 794.5728 1024 512 1024zM512 64.512c-247.2448 0-447.6672 200.448-447.6672 447.744 0 247.2704 200.4224 447.744 447.6672 447.744 247.2448 0 447.6672-200.4736 447.6672-447.744 0-247.296-200.4224-447.744-447.6672-447.744z m191.872 479.7184h-159.8976v159.8976a32 32 0 0 1-63.9488 0V544.256h-159.872a32 32 0 0 1 0-63.9744h159.872v-159.8976a31.9744 31.9744 0 0 1 63.9488 0v159.8976h159.8976a32 32 0 0 1 0 63.9744z" fill="#1B7AFF" p-id="2390"></path></svg></span>
    </div>

    <div id="show">

     
      
    </div>


</body>
    <script>
        //以每月为一个存储对象数组  年份+月份的名称 为键值
        
         let date=new Date();

         let  flag=date.getFullYear()+String(date.getMonth()+1);

         if(localStorage.getItem(flag)==null){
         	//console.log("第一个if");
            localStorage.setItem(flag,"[]");
         }
         if(sessionStorage.getItem("foods")==null){

           // console.log("sessionStorage");
            sessionStorage.setItem("foods","[]");
           
         }


          let foodObj=JSON.parse(sessionStorage.getItem("foods"));


          	if(foodObj.length>0){

          			let SUM=0;

          		    foodObj.forEach(function(obj){

            		console.log(obj);

            		addObj("菜名---"+obj.name);
            		addObj("单价---"+obj.price+"元/斤");
            		addObj("市场价---"+obj.priced+"元/斤");
            		addObj("重量---"+obj.meight+"公斤");
            		addObj("合计---"+obj.sum+"元");

            		SUM=SUM+obj.sum


            	})

          		   addObj("总合计---"+SUM+"元")

          	}


function addObj(content){

	let objs1=document.createElement("span");

	let text=document.createTextNode(content);

	objs1.appendChild(text);

	document.getElementById("show").appendChild(objs1);

}




    function add(){
        let food={
            name:this.getObj("name").value,
            price:this.getObj("price").value,
            priced:this.getObj("priced").value,
            meight:this.getObj("meight").value,
            sum:Number((this.getObj("meight").value)*2)*Number(this.getObj("price").value),
            time:date.getFullYear()+"年"+String(date.getMonth()+1)+"月"+date.getDate()+"日"
        }

            //定义本地永久数据存储
            
           let foods=JSON.parse(localStorage.getItem(flag));

           foods.push(food);


            localStorage.setItem(flag,JSON.stringify(foods));//将新增 修改后的数据更新



            //定义一个临时的
            let Foods=JSON.parse(sessionStorage.getItem("foods"));

            Foods.push(food);

            sessionStorage.setItem("foods",JSON.stringify(Foods));

            alert("新增菜品OK");

           
        
    }
   
    function getObj(id){

            let obj=document.getElementById(id);

            return obj;
        }

    function prints(obj){
        console.log(obj);
    }




    </script>
</html>